<template>
  <div>
    <h1>markRaw的使用</h1>
    <h2>{{ yy2.a }}</h2>
    <button @click="add">+1</button>
  </div>
</template>

<script setup>
// markRaw: 把一个普通对象标记成"永久原始"，从此将无法再变成proxy了。
// const raw = markRaw({a, b})
import { reactive, markRaw, isReactive } from "vue";

// { a: 1, b: 2 } 就是原始对象
// markRaw({ a: 1, b: 2 }) 把原始对象标记为不可代理
// 不能是raactive或readonly
const user = markRaw({ a: 1, b: 2 });

const yy2 = reactive(user);
// 不是一个reactive，不是响应式的
const add = () => {
  yy2.a++;
};
</script>

<style lang="scss" scoped>
</style>